<template>
	<view class="home-content">
		<image src="https://gz.yshj.minshengjiandu.com/api/file/ca3a08097aabffc2.png" mode="widthFix" class="top-bg">
		</image>
		<CustomNav :custom="custom" title="曝光台" :isBack="true" backColor="#fff" :topBgColor="topBgColor" color="#fff">
		</CustomNav>
		<!-- <view :style="'margin-top:'+(custom.statusBar+custom.nvaMartom+custom.navHeight+20)+'rpx'" class="search-block">
			<view class="input-block">
				<input placeholder-style="color:#efefef" placeholder="请输入关键字" v-model="keyWords" @confirm="search" />
				<view class="iconfont icon-sousuo" @click="getList"></view>
			</view>
		</view> -->
		<view class="menu-item" :style="'margin-top:'+(custom.statusBar+custom.nvaMartom+custom.navHeight+40)+'rpx'">
			<view class="tab-item" :class="tabActive==0?'active':''" @click="bindActive(0)">全部</view>
			<view class="tab-item" :class="tabActive==76?'active':''" @click="bindActive(76)">通报表扬</view>
			<view class="tab-item" :class="tabActive==77?'active':''" @click="bindActive(77)">通报批评</view>
			<view class="tab-item" :class="tabActive==78?'active':''" @click="bindActive(78)">情况通报</view>
		</view>
		<view class="list-block">
			<template v-if="list.length>0">
				<view v-for="(item,index) in list" :key="item.id" class="list-item"
					@click="navigate('/pages/policy/detail?id='+item.id)">
					<view class="title">
						<view :style="(index+1)>3?'visibility:hidden':''" class="fire iconfont icon-huo"></view>
						<view class="value">{{item.exposureTitle}}</view>
					</view>
					<view class="time">发布日期：{{item.createTime}}</view>
				</view>
			</template>
			<view v-else-if="list.length==0&&!listConf.more" style="text-align: center;">暂无数据</view>
			<view v-if="list.length>0&&!listConf.more" style="text-align: center;">没有更多了</view>
		</view>
	</view>
</template>

<script>
	import {
		getExposureListApi
	} from '@/api/lighthouse.js'
	import {
		isMore,
		getCustomNavData
	} from '@/util/util.js'
	export default {
		data() {
			return {
				custom: null,
				topBgColor: 'rgba(0,0,0,0)',
				keyWords: '',
				listConf: {
					page: 1,
					limit: 10,
					more: true,
				},
				list: [],
				tabActive: 0
			}
		},
		methods: {
			navigate(url) {
				uni.navigateTo({
					url
				})
			},
			bindActive(index) {
				this.tabActive = index
				this.listConf.page = 1
				this.getList(true)
				this.keyWords = ''
			},
			search() {
				this.getList(true)
			},
			getList(refresh = false) {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getExposureListApi({
					page: this.listConf.page,
					limit: this.listConf.limit,
					exposureTitle: this.keyWords,
					type: this.tabActive
				}).then(data => {
					uni.hideLoading()
					let list = data.list || [];
					if (refresh) {
						this.list = list;
					} else {
						this.list = [...this.list, ...list]
					}
					this.listConf.more = isMore(this.listConf.page, this.listConf.limit, data.count);
				}).catch(() => {
					uni.hideLoading()
				})
			}
		},
		onReachBottom() {
			if (this.listConf.more) {
				this.listConf.page++;
				this.getList()
			}
		},
		onPageScroll(e) {
			if (e.scrollTop >= 1) {
				//this.topBgColor='linear-gradient(to right,#656ef9,#7f3ee4)'
				this.topBgColor = '#086df3'
			} else {
				this.topBgColor = 'rgba(0,0,0,0)';
			}
		},
		onLoad() {
			this.custom = this.utils.getCustomNavData();
			this.getList(true)
		}
	}
</script>

<style lang="scss" scoped>
	.home-content {
		overflow: hidden;

		.top-bg {
			width: 100%;
			position: absolute;
		}

		.search-block {
			position: relative;
			width: 100%;
			height: 60rpx;
			padding: 0 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;

			.input-block {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				border: 1px solid #fff;
				border-radius: 40rpx;
				padding: 0 10rpx;
				height: 60rpx;

				.iconfont {
					flex-grow: 0;
					color: #fff;
					margin: 0 10rpx;
				}

				input {
					flex-grow: 1;
					font-size: 28rpx;
					color: #fff;
					margin: 0 10rpx;
				}
			}
		}

		.menu-item {
			width: 100%;
			height: 100rpx;
			//background-color: #157EFE;
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			color: #fff;
			position: relative;
			margin-top: 20rpx;

			.tab-item {
				margin-top: 30rpx;
				height: 60rpx;
				font-size: 30rpx;
			}

			.tab-item.active {
				font-size: 34rpx;
				font-weight: bold;
				height: 60rpx;
				border-bottom: 6rpx solid #fff;
			}
		}

		.list-block {
			width: calc(100% - 60rpx);
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			background: #fff;
			box-shadow: 0 0 10px 0px #e8e8e8;
			border-radius: 12rpx;
			margin: 0rpx auto;
			position: relative;
			min-height: 75vh;

			.list-item {
				.title {
					margin-top: 20rpx;
					display: flex;
					flex-direction: row;

					.fire {
						color: #fc5a00;
						font-size: 38rpx;
						width: 40rpx;
						height: 40rpx;
						margin-top: 2rpx;
					}

					.value {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						font-size: 30rpx;
					}
				}

				.time {
					width: calc(100% - 80rpx);
					margin: 0 auto;
					font-size: 24rpx;
					color: #999;
					border-bottom: 1px solid #efefef;
					margin-top: 20rpx;
					padding-bottom: 20rpx;
				}
			}

			.list-item:last-child {
				.time {
					border: none;
				}
			}
		}
	}
</style>